<template>
  <div class="content">
    <div class="header">
      <!-- 搜索框 -->
      <div class="header-item">
        <van-search class="search" placeholder="请输入搜索关键词" v-model="keyword" @blur="goSearchList($event)" ></van-search>
        <p v-if="isShow" @click="cancel">取消</p>
      </div>
      <defaultList v-if="isShow" :hotKeywordVOList="hotKeywordVOList" v-model="keyword"></defaultList>
      <searchList v-else  v-model="keyword" ></searchList>
    </div>
  
  </div>
</template>

<script setup lang="ts">
import defaultList from './defaultList/index.vue'
import searchList from './searchList/index.vue'
import {ref,onMounted,watch} from 'vue'
import { useRouter } from 'vue-router'
import { getDefaultKeyword} from '@/api/search'
import { ElMessage } from 'element-plus';
const router = useRouter()
const isShow = ref(true)
// 获取搜索数据
const keyword = ref()
// 取消
const cancel = () => {
  router.go(-1)
}


// 历史数据
const historyList = ref([])
// 去搜索列表界面
const goSearchList =(e:any)=>{
  if(e === ''){
    return
  }
  // 回车时展示搜索列表
  isShow.value = !isShow.value
  // const Boor = 
  if(e instanceof Object){
    // console.log(e.target.value);
    historyList.value.push(e.target.value)
  } 
  if(typeof(e) === 'string'){
    historyList.value.push(e)
  }
  // const add = JSON.parse(localStorage.getItem('search'))
  localStorage.setItem('search',JSON.stringify(historyList.value))
  const key = keyword.value
  router.push({
    path:'/search',
    query:{
      key
    }
  })
}
// 获取默认数据
// 默认展示
const defaultKeywords = ref([])
// 热门展示
const hotKeywordVOList = ref([])
const getData = async ()=>{
  try {
    let result = await getDefaultKeyword()
    console.log('11111',result)
    hotKeywordVOList.value = result.hotKeywordVOList
    defaultKeywords.value = result.defaultKeywords

  } catch (error) {
    ElMessage.error('获取数据失败')
  }
}
watch(()=>keyword.value,(value)=>{
  console.log(value)
  goSearchList(value)

})
onMounted(()=>{
  getData ()

})

</script>

<style lang="less" scoped>
.content {
  width: 100%;
  height: 100vh;
  background: #eee;
}
.header-item {
  display: flex;
  align-items: center;
  background: #fff;
}
.header-item p {
  width: 40px;
  font-size: 14px;
  padding-right: 5px;
}
.header .search {
  width: 100%;
  border-bottom: 1px solid #f8f5f5;
}

</style>
